<template>
  <div class="outmain ba_f">
    <div class="">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>储值概况</span>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 bortColor">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">今日储值金额</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.todayMoney || 0}}</p>
              <p class="fon_12 title6 lh25">今日赠送金额：{{jyData.todayGiveMoney || 0}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">今日储值金额</div>
                <button type="button"
                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span><i class="el-icon-question"></i></span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 bortColor">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">累计储值金额</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.allMoney || 0}}</p>
              <p class="fon_12 title6 lh25">累计赠送金额：{{jyData.allGiveMoney || 0}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">累计储值金额</div>
                <button type="button"
                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span><i class="el-icon-question"></i></span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 bortColor">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">累计储值人数</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.people || 0}}</p>
              <p class="fon_12 title6 lh25">较前一日：{{jyData.comparePeople || 0}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">累计储值人数</div>
                <button type="button"
                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span><i class="el-icon-question"></i></span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 bortColor">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">平台剩余余额</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.surplus || 0}}</p>
              <p class="fon_12 title6 lh25">今日消耗余额：{{jyData.consume || 0}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">平台剩余余额</div>
                <button type="button"
                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span><i class="el-icon-question"></i></span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="shuju_title mar_b20 mar_t20">
      <div class="shuju_title_text">
        <span>储值查询</span>
      </div>
    </div>
    <div class="pad_20 flex-bet">
      <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
        <el-form-item label="昵称">
          <el-input v-model="formInline.name" size="medium" placeholder="昵称" @change="selach"></el-input>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
                  v-model="formInline.region"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="selach">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="selach">搜索</el-button>
          <a :href="handelExport()" class="mar_l10"><el-button size="medium">导出</el-button></a>
        </el-form-item>
      </el-form>
      <div class="flex">

      </div>
    </div>
    <el-table
            :data="list"
            v-loading="listLoading"
            :element-loading-text="elementLoadingText"
            stripe
            style="width: 100%">
      <el-table-column
              prop="outTradeNo"
              label="用户信息"
      >
        <template slot-scope="scope">
          <div class="flex flex-y-top">
            <div class="">
              <img class="goodlogo bor_rad50" :src="scope.row.portrait"/>
            </div>
            <div class="mar_l10">
              <div class="flex">
                <div class="">{{scope.row.userName}}
                  <el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.userId}}）</el-tag>
                </div>
              </div>
              <p class="fon_12 color_9 mar_t5">小程序</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
              prop="money"
              label="充值金额"
      >
      </el-table-column>
      <el-table-column
              prop="number"
              label="赠送金额"
      >
        <template slot-scope="scope">
          <div v-show="scope.row.giveMoney>0">赠送金额：{{scope.row.giveMoney}}</div>
          <div v-show="scope.row.giveScore>0">赠送积分：{{scope.row.giveScore}}</div>
          <div v-show="scope.row.giveGrow>0">赠送成长值：{{scope.row.giveGrow}}</div>
          <div v-show="scope.row.num>0">赠送优惠券：{{scope.row.num}}</div>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--              prop="sb"-->
<!--              label="状态"-->
<!--      >-->
<!--      </el-table-column>-->
      <el-table-column
              prop="outTradeNo"
              label="订单编号"
      >
      </el-table-column>
      <el-table-column
              prop="createdAt"
              label="操作时间"
      >
      </el-table-column>
      <el-table-column
              prop="createdAt"
              label="充值状态"
      >
        <template >
          <div style="color: #489620">充值成功</div>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            :current-page.sync='page.currentPage'
            @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>
  import {getDepositOrder} from "@/api/user";
  import {rechargeStatistics} from "@/api/statistics";
  import {changeDate} from "@/utils/index";
  import index from '../../api/index';
  export default {
    created() {
      this.fetchData()
      this.rechargeStatistics()
    },
    data () {
      return {
        jyData:{
          todayMoney:'',
          todayGiveMoney:'',
          allMoney:'',
          allGiveMoney:'',
          people:'',
          comparePeople:'',
          surplus:'',
          consume:'',
        },
        formInline: {
          name: '',
          region: [],
        },
        list: [],
        listLoading: false,
        selectRows: "",
        elementLoadingText: "正在加载...",
        page: {
          total: 0,
          size: 10,
          currentPage: 1,
        },
      }
    },
    methods: {
      async rechargeStatistics(){
        const {data} = await rechargeStatistics()
        this.jyData = data
      },
      async fetchData() {
        this.listLoading = true;
        let param={
          page: this.page.currentPage,
          startTime: this.formInline.region.length?changeDate(this.formInline.region[0]):'',
          endTime: this.formInline.region.length?changeDate(this.formInline.region[1]):'',
          keyword: this.formInline.name,
        }
        const {data, count} = await getDepositOrder(param);
        this.list = data;
        this.page.total = count;
        this.listLoading = false;
      },
      selach(){
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.fetchData();
      },
      handelExport(){
        let startTime = this.formInline.region.length?changeDate(this.formInline.region[0]):''
        let endTime = this.formInline.region.length?changeDate(this.formInline.region[1]):''
        let backendPath = index.backendPath
        return backendPath + "channel/member/get-deposit-order?export=1"+'&page='+this.page.currentPage+'&keyword='+this.formInline.name+'&startTime='+startTime+'&endTime='+endTime
      },
    }
  }
</script>
